<template>
  <div class="banner">
    <div class="nav">
      <div class="nav_item">
        <div class="title" @mouseover="hover">硅谷甄选</div>
        <div class="category_list"  v-if="isShow||isSecondShow"  @mouseleave="leaveAll">

            <div class="first_level"  @mouseleave="leaveFirst">
              <div class="category_item" @mouseover="showSecond">haha</div>
              <div class="category_item" @mouseover="showSecond">haha</div>
              <div class="category_item" @mouseover="showSecond">haha</div>
              <div class="category_item" @mouseover="showSecond">haha</div>
              <div class="category_item" @mouseover="showSecond">haha</div>
              <div class="category_item" @mouseover="showSecond">haha</div>

            </div>

            <div class="second_level" v-if="isSecondShow" @mouseleave="leaveSecond">second level</div>
        </div>
      </div>
    </div>
    <el-carousel :interval="4000"  height="400px"  style="width: 70%;margin: 0 auto;">
      <el-carousel-item v-for="item in items" :key="item.id">
        <el-image :src="item.url|fullPicUrl" style="margin:0 auto;width: 100%;height: 100%"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>


<script>


import {combineURLs} from '~/util/util'

  export default {
    name:"Banner",
    data(){
      return {
        isShow:false,
        isSecondShow:false
      }
    },
    props:{
      items:{
        type:Array,
        default:[]
      }
    },
    computed:{
      fullUrl(){
        return (url)=>combineURLs(process.env.NUXT_ENV.VITE_PIC_BASE_URL,url)
      }
    },

    filters:{
      fullPicUrl:function (value){
        return combineURLs(process.env.NUXT_ENV.VITE_PIC_BASE_URL,value)
      }
    },
    methods:{
       hover:function(){
        this.isShow=true
      },

       showSecond:function(){
        this.isSecondShow=true
      },

       leaveAll:function(){
        this.leaveFirst()
        this.leaveSecond()
      },

       leaveSecond:function(){
        this.isSecondShow=false
      },
       leaveFirst:function(){
        this.isShow=false
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .banner{
    position: relative;
  }
  .banner .nav{
    position: absolute;
    width: 100%;
    z-index: 10000;
  }

  .banner .nav .nav_item{
     width: 1200px;
    margin: 0 auto;

  }

  .banner .nav .nav_item .title{
    height: 50px;
    line-height: 50px;
    width: 224px;
    font-size: 18px;
    margin-top: -50px;
    font-weight: bold;
    color: #fff;
    background: #0c9;
    text-align: center;
    letter-spacing: 3px;
    border-radius: 8px 8px 0px 0px;
  }

  .category_list{
    height: 400px;
  }

  .category_list .first_level{
    background-color: rgba(0, 0, 0, .6);
    height: 400px;
    box-sizing: border-box;
    padding-top: 20px;
    width: 224px;
    display: inline-block;
    z-index: 30000;
  }


  .category_list .second_level{
    background-color: #888888;
    display: inline-block;
  }
  /* 下面我们会解释这些 class 是做什么的 */

</style>
